<template>
  <div class="simulations">
    <left-right-structure>
      <template slot="left">
        <ul @click="onClick">
          <li
            v-for="item in simulations"
            :key="item.id"
            :data-id="item.id"
            :style="{ color: item.finished == 1 ? '#67c23a' : '#000' }"
          >
            {{ item.chinese_name }}
          </li>
        </ul>
      </template>
      <template slot="right">
        <div v-if="clickItem" style="height: 100%" class="item-detail">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="time" label="日期" width="180">
            </el-table-column>
            <el-table-column prop="progress" label="训练进度" width="180">
            </el-table-column>
            <el-table-column prop="score" label="得分"> </el-table-column>
          </el-table>
          <!-- <h1>折线图</h1> -->
          <div style="width: 100%; height: 50%" id="stacked-line"></div>
        </div>
        <el-empty v-else description="请在右侧选择要查看详情的训练"></el-empty>
      </template>
    </left-right-structure>
  </div>
</template>

<script>
import LeftRightStructure from "@/components/LeftRightStructure.vue";
import * as echarts from "echarts/core";
import {
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
} from "echarts/components";
import { LineChart } from "echarts/charts";
import { UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";

echarts.use([
  TitleComponent,
  ToolboxComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  LineChart,
  CanvasRenderer,
  UniversalTransition,
]);
export default {
  name: "SimulationPerformance",
  components: { LeftRightStructure },
  data() {
    return {
      simulations: [
        {
          chinese_name: "拉赫玛尼诺夫c小调第二钢琴协奏曲",
          name: "Rachmaninoff-Piano-Concerto-No.2",
          finished: 1,
          id: "1e2e619818bc46b4a9ad37878a0138bc",
        },
        {
          chinese_name: "143213241",
          name: "Rachmaninoff-Piano-Concerto-No.2",
          finished: 1,
          id: "1e2e619818bc46b4a9341423ad37878a0138bc",
        },
        {
          chinese_name: "143213341324241",
          name: "Rachmaninoff-Piano-Concerto-No.2",
          finished: 0,
          id: "1e2e619818bc46b4a9341423423432ad37878a0138bc",
        },
        {
          chinese_name: "143213241",
          name: "Rachmaninoff-Piano-Concerto-No.2",
          finished: 0,
          id: "1e2e619818bc46b43142142a9341423ad37878a0138bc",
        },
      ],
      tableData: [
        {
          score: 95.0, //得分
          progress: 80.0, //相对训练进度
          time: "2023-8-1 15:51:59", //时间戳
        },
        {
          score: 96.0,
          progress: 70.0,
          time: "2023-8-2 23:59:59",
        },
        {
          score: 97.0,
          progress: 60.0,
          time: "2023-8-4 00:00:00",
        },
        {
          score: 97.0,
          progress: 60.0,
          time: "2023-8-4 00:00:00",
        },
        {
          score: 97.0,
          progress: 60.0,
          time: "2023-8-4 00:00:00",
        },
        {
          score: 97.0,
          progress: 60.0,
          time: "2023-8-4 00:00:00",
        },
      ],
      clickItem: null,
    };
  },
  watch: {
    clickItem() {
      const xAxisData = [
        "2023-8-1 15:51:59",
        "2023-8-2 23:59:59",
        "2023-8-4 00:00:00",
      ];
      const yAxisData = [
        {
          stack: "Total",
          data: [95.0, 96.0, 97.0],
          name: "成绩",
          type: "line", //第一条线
        },
        {
          stack: "Total", //第二条线
          data: [80.0, 70.0, 60.0],
          name: "相对训练进度",
          type: "line",
        },
      ];
      this.$nextTick(() => {
        if (!this.chartDom) {
          this.chartDom = document.getElementById("stacked-line");
        }
        if (!this.myChart) {
          this.myChart = echarts.init(this.chartDom);
        }
        // console.log(this.chartDom, this.myChart);
        this.initChartDOM(xAxisData, yAxisData);
      });
    },
  },
  methods: {
    onClick(e) {
      const { id } = e.target.dataset;
      // console.log("id: ", id);
      this.clickItem = id;
      // TODO: 通过这个id请求对应的数据
    },
    initChartDOM(xAxisData, yAxisData) {
      const option = {
        title: {
          text: "XXX图",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["成绩", "相对训练进度"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: xAxisData,
        },
        yAxis: {
          type: "value",
        },
        series: yAxisData,
      };

      option && this.myChart.setOption(option);
    },
  },
};
</script>

<style lang='less' scoped>
.simulations {
  width: 100%;
  height: 100%;
  ul {
    list-style: none;
    li {
      height: 24px;
      line-height: 24px;
      // background-color: red;
      background-color: #fff;
      border-bottom: 1px dashed #ccc;
      cursor: pointer;
    }
  }
}

.item-detail {
  .el-table {
    height: 50%;
    overflow: auto;
  }
  #stacked-line {
    width: 100%;
    height: 50%;
  }
}
</style>